<template>
    <div>
        <van-nav-bar
                title="确认订单"
                left-arrow
                :fixed="true"
                class="my-nav"
                @click-left="$router.back(-1)"
                :z-index="100"
        />
        <div style="margin-top: 50px;margin-bottom: 60px; color:#666; font-size: 14px;">
            <!-- 联系人卡片 -->
            <div @click="$router.push('address')"
                 class="van-cell van-cell--center  van-contact-card van-contact-card--add">
                <div class="van-cell__value van-cell__value--alone" style="line-height: 30px;">
                    <div>
                        <span> <van-icon name="contact"/> 收货人: {{shippingAddress.name}}</span>
                        <span style="margin-left: 20px;">  {{shippingAddress.phone}}</span>
                    </div>
                    <span style="font-size: 13px;"><van-icon
                            name="location"/> 收货地址:  {{shippingAddress.region + shippingAddress.address}}</span>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
            </div>
            <!--订单列表-->
            <div
                    v-for="buy in buyList"
                    :key="buy.id"
                    style="padding-top: 5px; background: #fafafa;"
            >
                <van-panel>
                    <van-nav-bar slot="header" style="color: #666">
                        <div slot="left">
                            <van-icon name="shop" style="color:red;margin-right: 6px"/>
                            {{buy.name}}
                        </div>
                    </van-nav-bar>
                    <van-card
                            v-for="item in buy.commodity"
                            :title="item.title"
                            :desc="item.standard+'/'+item.color"
                            :price="formatPrice(item.price)"
                            :num="item.count"
                            :thumb="item.thumb"
                    />
                    <div slot="footer" class="van-clearfix" style="color: #666">
                        <div style="float: right;font-size: small">
                            订单金额: ￥{{formatPrice(totalPrice(buy.commodity))}} 合计 : <span
                                style="color:red;">￥ {{formatPrice(totalPrice(buy.commodity) + buy.freight)}}</span>
                            (运费￥{{formatPrice(buy.freight)}})
                        </div>
                    </div>
                </van-panel>
            </div>


            <!--            <div style="margin: 10px;font-size: 13px">发票结算 <span
                                style="margin-left:15px;color: red;font-size: xx-small">提示:请在个人中心提交开票申请</span></div>-->


            <van-cell-group>
                <van-cell :title="'配送方式 ('+deliverWay+')'" icon="location" @click="show = true" is-link/>
            </van-cell-group>
            <div class="goods" style="border-top: 2px solid #fafafa;background: #fff">
                <p>
                    商品:<span>{{allTotalNumber}}件</span>
                </p>
                <p>
                    商品总额:<span>￥{{formatPrice(allTotalPrice)}}</span>
                </p>
                <p>
                    运费:<span>￥ {{formatPrice(allTotalFreight)}}</span>
                </p>
            </div>
            <van-submit-bar
                    :price="allTotalPrice*100"
                    button-text="提交订单"
                    @submit="onSubmit"
            />
        </div>

        <van-popup position="bottom" v-model="show">
            <div style="margin: 15px;">配送方式</div>
            <van-radio-group v-model="radio">
                <van-cell-group>
                    <van-cell title="自取" clickable @click="radio = 'SELF'">
                        <van-radio name="SELF"/>
                    </van-cell>
                    <van-cell title="快递" clickable @click="radio = 'EXPRESS'">
                        <van-radio name="EXPRESS"/>
                    </van-cell>
                    <van-cell title="顺丰" clickable @click="radio = 'SF'">
                        <van-radio name="SF"/>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <div style="margin: 15px;">
                <van-button type="primary" bottom-action @click="confirm">确定
                </van-button>
            </div>
        </van-popup>
    </div>

</template>

<script>
  import {Toast} from 'vant';
  import bus from '../../bus'
  import getFreightPrice from '../../api/order/submit/freight'
  import getShippingAddress from '../../api/order/submit/shipping-address'
  import orderSubmitFunction from '../../api/order/submit'
  import {deleteCartAll, initCartGoodsNum} from '../../api/carts'

  export default {
    data() {
      return {
        shippingAddress: {
          /*"id": 214,
          "name": "张三",
          "enabled": true,
          "phone": "15166635231",
          "region": "山东省 济南市 槐荫区",
          "address": "1234是对方的手放到是斯蒂芬5"*/
        },
        show: false,
        radio: 'EXPRESS',
        buyList: bus.state.buyList
      };
    },
    methods: {
      formatPrice(price) {
        return Number.parseInt(price).toFixed(2);
      },
      totalPrice(commodity) {
        return commodity.reduce((x, y) => x + y.price * y.count, 0);
      },
      totalNumber(commodity) {
        return commodity.reduce((x, y) => x + y.count, 0);
      },
      confirm() {
        this.show = false
      },
      onSubmit() {
        let shippingAddress = JSON.parse(JSON.stringify(this.shippingAddress));
        shippingAddress.region = shippingAddress.region.replace(/ /g, '-');
        let orderSubmit = {
          address: shippingAddress,
          deliverWay: this.radio
        };
        orderSubmit.list = this.buyList.map(buy => ({
          shopId: buy.id,
          name: buy.name,
          origin: bus.state.cartSubmitFlag ? 'SHOPPING_CART' : 'BUY_NOW',
          commodity: buy.commodity.map(item => ({
            skuId: item.skuId,
            count: item.count
          }))
        }));
        orderSubmitFunction(orderSubmit, orderCodes => {
          bus.state.orderCodes = orderCodes;
          bus.state.buyList = [];
          initCartGoodsNum();
          this.$router.push('pay')
        }, _ => Toast('订单提交失败 请联系平台管理员'));
      },
      loadFreightPrice(buy) {
        let params = {
          shopId: buy.id,
          totalNum: this.totalNumber(buy.commodity),
          totalPrice: this.totalPrice(buy.commodity)
        };
        getFreightPrice(params, data => {
          this.$set(buy, 'freight', data);
        })
      }
    },
    computed: {
      allTotalPrice() {
        return this.buyList.reduce((x, y) => x + this.totalPrice(y.commodity), 0)
      },
      allTotalNumber() {
        return this.buyList.reduce((x, y) => {
          return x + y.commodity.reduce((x1, y1) => x1 + y1.count, 0)
        }, 0)
      },
      allTotalFreight() {
        return this.buyList.reduce((x, y) => x + y.freight, 0)
      },
      deliverWay() {
        if (this.radio === 'SELF') {
          return '自提'
        } else if (this.radio === 'EXPRESS') {
          return '快递'
        } else if (this.radio === 'SF') {
          return '顺丰'
        }
      }
    },
    mounted() {
      if (bus.state.buyList < 1) {
        this.$router.back(-1)
      }
      this.buyList.forEach(buy => this.loadFreightPrice(buy));
      getShippingAddress(data => {
        this.shippingAddress = data;
      })
    }
  }
</script>

<style lang="less" scoped>
    .goods {
        font-size: 13px;
        color: #666;
        padding: 15px 20px;
    }

    .goods span {
        float: right
    }
</style>